<template>
  <v-layout type="main">
    <p class="page-title">数据标注<!-- <i class="el-icon-warning"></i> --></p>
    <div class="content-box" v-if="tableData.length">
      <v-btn type="primary" class="add-btn" @click="toAdd">+新增</v-btn>
      <el-input placeholder="请输入名称" v-model="pageData.name" @input="searchHandler" class="input-with-select">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
      <div class="table-box">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="name" label="名称">
            <template slot-scope="scope">
              <el-link type="primary" @click="skip(scope.row)">{{ scope.row.name }}</el-link>
            </template>
          </el-table-column>
          <el-table-column label="标注类型" prop="annType" />
          <el-table-column label="数据集名称">
            <template slot-scope="{row}">
              {{ row.dataset && row.dataset.name }}
              <span class="version-word" v-if="row.datasetVersion && row.datasetVersion.version">{{ row.datasetVersion &&
                row.datasetVersion.version }}</span>
              <span class="version-word" v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column prop="labels" label="标注进度">
            <template slot-scope="{ row }">
              <div class="progress-box">
                <div class="progress">
                  <span class="plunger" :style="{
                    width: `${row.annFinished / row.total * 100}%`
                  }"></span>
                </div>
                <span class="plunger-number">{{ parseInt((row.annFinished / row.total) * 100) }}%</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="数据量" prop="total" />
          <el-table-column label="创建时间">
            <template slot-scope="{ row }">{{ formatTime(row.createTime) }}</template>
          </el-table-column>
          <el-table-column width="210" label="操作">
            <template slot-scope="{ row }">
              <el-button type="text" @click="skip(row)" size="small">开始</el-button>
              <el-button type="text" @click="publish(row)" size="small">发布</el-button>
              <el-button type="text" @click="put(row)" size="small">修改</el-button>
              <!-- <el-button type="text" @click="del(row)" size="small">删除</el-button> -->
              <el-popover placement="top" width="80" trigger="click" v-model="row.visible">
                <p>您确定要删除吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="row.visible = false">取消</el-button>
                  <el-button type="primary" size="mini" @click="del(row)">确定</el-button>
                </div>
                <el-button type="text" slot="reference" size="small">删除</el-button>
                <!-- <el-button slot="reference" type="danger" size="mini">删除</el-button> -->
                <!-- <i slot="reference" class="el-icon-delete delete-btn" /> -->
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page-nb">
        <div class="page-nb-pagination" style="text-align: right;" v-if="pageData.total > 10">
          <el-pagination background layout="total, prev, pager, next, jumper" :page-size="pageData.size"
            @current-change="handleCurrentChange" :total="pageData.total">
          </el-pagination>
        </div>
      </div>
    </div>
    <div v-else class="no-data">
      <el-select v-model="datasetsVal" placeholder="请选择数据集文件" @change="selectDataSet">
        <el-option v-for="item in datasets" :key="item.id" :label="item.name" :value="item.id">
        </el-option>
      </el-select>
    </div>
    <el-dialog :visible.sync="showPublish" title="发布新版本" width="800px">
      <el-form ref="form" label-width="90px">
        <el-form-item label="版本号：">
          <el-input v-model="versionCount" maxlength="200" disabled="disabled" clearable placeholder="长度200个字符"
            size="medium"></el-input>
        </el-form-item>
        <el-form-item label="历史版本：">
          {{ detailData.currentVersion ? detailData.currentVersion.version.toLowerCase() : "-" }}
        </el-form-item>
        <el-form-item label="描述：">
          <el-input type="textarea" v-model="description" placeholder="最多100个字符" style="wdith:800px" maxlength="100"
            rows="4"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <v-btn type="primary" :disabled="canclick" @click="publishNewVersion">确认</v-btn>
      </span>
    </el-dialog>
  </v-layout>
</template>
<script>
import { getAllDatasets } from '@/api/dataset'
import { getAnntasks, delAnntasks, aggregateAnnotations, getAnntasksDetail, publishAnntasks } from '@/api/label'
import { addFileToDataset } from '@/api/file'
import { detailDataSet } from '@/api/dataset'
import { formatTime, debounce } from "@/utils/tool"
// publishVersion
export default {
  name: 'datsetLis',
  data() {
    return {
      tableData: [],
      showPublic: false,
      pageData: {
        current: 1,
        size: 10,
        total: 0,
        projectId: this.$route.query.id,
        visibility: '1',
        type: 1,
        name: ''
      },
      datasetsVal: '',
      datasets: [],
      taskId: '',

      canclick: false,
      description: '',
      showPublish: false,
      versionCount: "v1",
      detailData: {}
    }
  },
  created() {
  },
  components: {

  },
  methods: {
    formatTime,
    skip(row) {
      console.log(row)
      if (row.annType == '物体检测') {
        this.$router.push({
          path: '/project/dataset/label/working',
          query: {
            id: this.$route.query.id,
            taskId: row.id
          }
        })
      } else {
        this.$router.push({
          path: '/project/dataset/label/classify',
          query: {
            id: this.$route.query.id,
            taskId: row.id
          }
        })
      }
      // <router-link :to="{path:'/project/dataset/label/working',query:{id:$route.query.id, taskId:scope.row.id}}">
    },
    async getData() { // get list data
      let res = await getAnntasks(this.pageData)
      if (res && res.result && res.pagination) {
        this.tableData = res.result;
        this.pageData.total = res.pagination.total;
      }
      if (res.result && !res.result.length) {
        let resDateset = await getAllDatasets(this.pageData)
        this.datasets = resDateset;
      }
    },
    toAdd() {
      this.$router.push({
        path: '/project/dataset/label/detail',
        query: { id: this.$route.query.id }
      })
    },
    searchHandler() {
      this.pageData.current = 1;
      debounce(this.getData, 400)();
    },
    selectDataSet(val) {
      this.$router.push({
        path: '/project/dataset/label/detail',
        query: {
          id: this.$route.query.id,
          datasetId: val
        }
      })
    },
    async detailDataSet(id) {
      let res = await detailDataSet({ id });

      if (res) {
        this.detailData = res;
        if (this.detailData.versionCount) {
          this.versionCount = "v" + (this.detailData.versionCount + 1)
        }
      }
    },
    async publishNewVersion() {
      this.canclick = true;
      await publishAnntasks({ id: this.taskId })
      await addFileToDataset({ id: this.detailData.id, path: `.` })
      // let res = await publishVersion({ datasetId: this.detailData.id, parent: this.detailData.currentVersionId, description: this.description })

      // if (res) {
      this.canclick = false;
      this.$message.success('发布成功')
      this.$router.push({
        path: '/project/dataset/versions',
        query: { id: this.$route.query.id, datasetid: this.detailData.id }
      })
      // }
    },
    async publish(row) {
      let detail = await getAnntasksDetail({ id: row.id })
      detail.labels.forEach((e, i) => { e.id = i; e.supercategory = e.name })
      let info = await this.$myInfo(this)
      let res = await aggregateAnnotations({
        annotationFormat: "MS_COCO",
        categories: detail.labels,
        annotationTaskId: row.id,
        odvcMeta: {
          odvcId: row.datasetId,
          tenantId: info.orgId,
          userId: info.id
        }
      })
      if (res.data.total > 0) {
        console.log(res.data)
        await this.detailDataSet(row.datasetId)
        this.taskId = row.id
        this.showPublish = true
      } else {
        this.$message.error('发布失败')
      }
    },
    put({ id }) {
      this.$router.push({
        path: '/project/dataset/label/detail',
        query: {
          id: this.$route.query.id,
          labelId: id,
        }
      })
    },
    async del({ id }) {
      // let res = await this.$isDel();
      // if (res) {
      await delAnntasks({ id })
      this.$message.success("删除成功");
      this.getData()
      // }
    },


  },
  watch: {

  },
  mounted() {
    this.getData();
    if (this.$route.path === '/project/dataset/lis') {  // reset the list page  query prarms
      this.$router.push({ query: { id: this.$route.query.id } })
    }
  },
  destroyed() {

  }
}
</script>

<style lang="less" scoped>
.layout {
  width: 99.4%;
  overflow: hidden;

  .table-box {
    padding: 0 16px;
  }

  .no-data {
    background: url(~@/assets/img/no-data-label.png) no-repeat center 0;
    background-size: 120px 113px;
    width: 200px;
    padding-top: 124px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  // <img src="@/assets/img/no-data-label.png" alt="">
}

.progress-box {
  display: flex;
  width: 100%;

  .progress {
    height: 6px;
    background: #EAEEF5;
    border-radius: 3px;
    overflow: hidden;
    flex: 1;
    margin-top: 8px;

    .plunger {
      height: 6px;
      background: #4285F4;
      display: block;
      border-radius: 3px;
      overflow: hidden;
    }
  }

  .plunger-number {
    padding-left: 6px;
  }
}

.version-word {
  font-size: 12px;
  color: #999;
}
</style>
